<!--
 * @Author: your name
 * @Date: 2020-04-01 10:47:21
 * @LastEditTime: 2020-06-08 16:53:04
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue-element-admin\src\views\system\organization\index.vue
 -->
<template>
  <div style="padding:10px;" class="container">
    <div class="left">
      <fieldset class="fieldInfo">
        <legend>
          <span>组织机构树</span>
        </legend>
        <div class="tree">
          <el-tree
            ref="organizationTree"
            :data="organizationData"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
            :props="defaultProps"
          ></el-tree>
        </div>
      </fieldset>
    </div>
    <div class="right">
      <fieldset class="fieldInfo">
        <legend>
          <span>机构信息</span>
        </legend>
        <div class="organizationDetail">
          <el-form ref="postForm" :model="postForm" class="form-container">
            <div class="createPost-main-container">
              <el-row>
                <el-col :span="24">
                  <div class="postInfo-container">
                    <el-row>
                      <el-col :span="24">
                        <el-form-item
                          label-width="115px"
                          label="机构名称"
                          prop="organizationName"
                          class="postInfo-container-item"
                        >
                          <el-input placeholder="请输入组织名称" v-model="postForm.organizationName"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="24">
                        <el-form-item
                          label-width="115px"
                          label="备注"
                          prop="comment"
                          class="postInfo-container-item"
                        >
                          <el-input
                            placeholder="请输入备注信息"
                            v-model="postForm.comment"
                            type="textarea"
                            :rows="4"
                          ></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <el-form-item style="text-align: center;">
                          <el-button type="primary" @click="editOrganization">保存节点</el-button>
                          <el-button
                            type="primary"
                            @click="deleteOrganization"
                            v-if="!postForm.root"
                          >删除节点</el-button>
                          <el-button type="primary" @click="addNewChildOrg">新增子节点</el-button>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-form>
        </div>
      </fieldset>
    </div>
    <!-- 新增组织节点信息对话框 -->
    <el-dialog title="节点信息" :visible.sync="dialogFormVisible">
      <el-form :model="dialogForm">
        <el-form-item label="父组织" label-width="115px">
          <el-input v-model="dialogForm.parentOrganizationName" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="组织名称" label-width="115px">
          <el-input v-model="dialogForm.organizationName"></el-input>
        </el-form-item>
        <el-form-item label="备注" label-width="115px">
          <el-input v-model="dialogForm.comment" type="textarea" :rows="4"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrganization">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  fetchTreeData,
  deleteOrganization,
  editOrganization,
  addOrganization
} from '@/api/organization'
export default {
  data() {
    // const addOrganization = {
    //   root: false,
    //   organizationName: '',
    //   comment: ''
    // }
    return {
      defaultProps: {
        label: 'name'
      },
      postForm: {
        root: false,
        organizationName: '',
        comment: ''
      },
      organizationData: [],
      dialogFormVisible: false,
      dialogForm: {
        parentOrganizationName: '',
        organizationName: '',
        comment: ''
      },
      currentSelectNode: ''
    }
  },
  components: {},
  created() {
    this.getTreeData()
  },
  methods: {
    addNewChildOrg() {
      this.dialogForm.organizationName = ''
      this.dialogForm.comment = ''
      this.dialogFormVisible = true
    },
    getTreeData() {
      fetchTreeData({
        rootId: 0
      }).then((response) => {
        console.log(response.data)
        this.organizationData = response.data
      })
    },
    editOrganization() {
      // console.log('current', this.currentSelectNode)
      let res = editOrganization({
        id: this.currentSelectNode.data.id,
        deleteFlag: this.currentSelectNode.data.deleteFlag,
        name: this.postForm.organizationName,
        parentOrg: this.currentSelectNode.data.parentOrg,
        comment: this.postForm.comment
      }).then((res) => {
        console.log('res', res)
        if (res.success) {
          this.getTreeData()
        }
      })
    },
    handleNodeClick(data, node) {
      console.log('data----', data, 'node----', node)
      this.currentSelectNode = node
      this.postForm.organizationName = data.name
      this.dialogForm.parentOrganizationName = data.name
      this.postForm.comment = data.comment
      this.postForm.root = node.level == 1 ? true : false
    },
    addOrganization() {
      let newOrganization = {
        parentOrg: this.currentSelectNode.data.id,
        name: this.dialogForm.organizationName,
        comment: this.dialogForm.comment
      }
      addOrganization({
        ...newOrganization
      }).then(() => {
        // this.$refs.organizationTree.append(
        //   newOrganization,
        //   this.currentSelectNode
        // )
        this.getTreeData()
        this.postForm = {
          root: false,
          organizationName: '',
          comment: ''
        }
        this.dialogFormVisible = false
      })
    },
    deleteOrganization() {
      if (
        this.currentSelectNode &&
        this.currentSelectNode.data.id &&
        this.currentSelectNode.data.id != 1
      ) {
        console.log('mynode---', this.currentSelectNode)
        this.$refs.organizationTree.remove(this.currentSelectNode)
        deleteOrganization({ startId: this.currentSelectNode.data.id }).then(
          (res) => {
            if (res.code == 20000) {
              this.postForm = {
                organizationName: '',
                comment: ''
              }
              this.currentSelectNode = ''
            }
          }
        )
      } else {
        console.log('mynode---', this.currentSelectNode)
        this.$message({
          message: '节点必须选中后才可以删除',
          type: 'error'
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  .fieldInfo {
    border-color: #eee;
    border-width: 1px;
    border-style: solid;
    margin-bottom: 20px;
    height: 80vh;
    legend {
      color: #666;
    }
  }
  .left {
    flex: 1;
  }
  .right {
    flex: 2;
  }
}
</style>

